<template>
    <view>
        <button @click="toggleLeft1" type="default">左边弹出1</button>
        <jk-button @click="toggleLeft2" type="primary">左边弹出2</jk-button>
        <jk-button @click="toggleRight1" type="default">右边弹出1</jk-button>
        <jk-button @click="toggleRight2" type="primary">右边弹出2</jk-button>
        <jk-drawer mode="left" :visible="showLeft1" @close="toggleLeft1">
            <view class="demo-container">
                单击遮罩层关闭
            </view>
        </jk-drawer>
        <jk-drawer mode="left" :visible="showLeft2" :mask-closable="false">
            <view class="demo-container">
                禁止单击遮罩关闭
                <jk-button @click="toggleLeft2" type="primary" size="mini">关闭</jk-button>
            </view>
        </jk-drawer>
        <jk-drawer mode="right" :visible="showRight1" @close="toggleRight1">
            <view class="demo-container">
                单击遮罩层关闭
            </view>
        </jk-drawer>
        <jk-drawer mode="right" :visible="showRight2" :mask-closable="false">
            <view class="demo-container">
                禁止单击遮罩关闭
                <jk-button @click="toggleRight2" type="primary" size="mini">关闭</jk-button>
            </view>
        </jk-drawer>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                showLeft1: false,
                showLeft2: false,
                showRight1: false,
                showRight2: false,
            };
        },
        methods: {
            toggleLeft1() {
                this.showLeft1 = !this.showLeft1;
                console.log(this.showLeft1)
            },
            toggleLeft2() {
                this.showLeft2 = !this.showLeft2
            },
            toggleRight1() {
                this.showRight1 = !this.showRight1
            },
            toggleRight2() {
                this.showRight2 = !this.showRight2
            }
        }
    }
</script>

<style>
.demo-container{
    background-color: #FFFFFF;
    height: 100%;
    width: 400upx;
}
</style>
